import React from "react";
import styles from "./Tooltip.module.css";
import clsx from "clsx";

export type Direction = "top" | "bottom" | "left" | "right";

export interface TooltipProps {
    content: React.ReactNode;
    direction?: Direction;
    size?: "small" | "medium" | "large";
    delay?: number;
    children: React.ReactElement;
    className?: string;
}

export const Tooltip: React.FC<TooltipProps> = ({
    content,
    direction = "top",
    size = "medium",
    delay = 200,
    children,
    className = "",
}) => {
    const combinedClassName = clsx(styles.tooltipContainer, className);
    return (
        <div className={combinedClassName}>
            {children}
            <div
                className={`${styles.tooltip} ${styles[direction]} ${styles[size]}`}
                style={{ transitionDelay: `${delay}ms` }}
            >
                {content}
            </div>
        </div>
    );
};
